<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入组件库 -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="common.css">
    <script src="common.js"></script>
    <title>Title</title>
    <style>

        #add {
            margin: 0 0 0 5%;
        }

        .block{
            float: right;
            margin: 0  5% 10px  0 ;
        }

        .footer{
            height: 100px;
        }
        .el-table__row{

        }
    </style>
</head>

<body>
<div id="app">

    <el-menu
            default-active="3"
            class="leftNavBar el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#E6E6E6">
        <div class="title" style="margin-bottom: 10px">
            Market Management
        </div>
        <a href="/market/detail.html">
            <el-menu-item  index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">库存管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail2.html">
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
        </el-menu-item>
        </a>
        <a href="/market/detail3.html">
            <el-menu-item  index="3">
                <i class="el-icon-menu"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail4.html">
            <el-menu-item  index="4">
                <i class="el-icon-menu"></i>
                <span slot="title">入库订单</span>
            </el-menu-item>
        </a>
    </el-menu>
    <div class="right">
        <div class="top"><span></span>{{title}}<span style="margin-right: 5%">
                <el-popover
                        placement="top-start"
                        width="50"
                        trigger="hover"
                >
                    <div style="height:100%;text-align: center"><el-button onclick="logout()">登出</el-button></div>
                           <i slot="reference" class="el-icon-more"></i>
                        </el-popover>
            </span>
        </div>
        <template>

            <!--   日期选择器-->
            <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                        @change="load"
                        v-model="timeValue"
                        type="daterange"
                        align="right"
                        unlink-panels
                        size="small"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>

            <!-- 各个列-->
            <el-table
                    :data="tableData.detail"
                    ref="filterTable"
                    style="width: 90%;margin: auto">
                <el-table-column type="expand" props="detail">
                    <template  slot-scope="scope">
                        <el-table
                                :data="scope.row.detail"
                                stripe
                                style=" padding-left: 100px;">
                            <el-table-column
                                    prop="gid"
                                    label="商品编号"
                                    width="160"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="good_name"
                                    label="商品名称"
                                    width="160">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="购买数量"
                                    width="150"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="spend"
                                    label="商品花费"
                                    width="150"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="is_return"
                                    label="类型"
                                    >
                                <template slot-scope="scope">
                                    <el-tag
                                            :type="!scope.row.is_return ? 'success' : 'primary'"
                                            disable-transitions>{{scope.row.is_return ? "退款" :"购买"}}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单号"
                        prop="oid"
                        width="200"
                        sortable>
                </el-table-column>

                <el-table-column
                        label="订单总价"
                        width="250"
                        sortable>
                    <template slot-scope="scope">
                        <el-tag class="el-icon-data-analysis">总价格: {{scope.row.total_spend}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="买家id"
                        width="200"
                        prop="cid"
                        sortable>

                </el-table-column>
                <el-table-column
                        label="订单日期"
                        width="250"
                        prop="buy_date"
                        sortable>

                </el-table-column>
                    <el-table-column
                            prop="is_return"
                            label="类型"
                            :filters="[{ text: 'buy', value: 0 }, { text: 'refund', value: 1 }]"
                            :filter-method="filterTag"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="!scope.row.is_return ? 'success' : 'primary'"
                                    disable-transitions>{{scope.row.is_return ? "退款" :"购买"}}</el-tag>
                        </template>
                    </el-table-column>


            </el-table>
        </template>
    </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                title: '订单管理',
                value2: '',
                tableData:  {
            },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],

                },
                timeValue: [new Date(new Date() - 3600 * 1000 * 24 * 30),new Date(+new Date() + 1000 * 60 * 60 * 24)],
            }
        },
        created(){
            this.load();
        },
        methods:{
            load(){
                console.log(this.timeValue)
                let self = this;
                myPost(baseUrl+'manager/getBuying',{'stime':this.timeValue[0].toLocaleString(),'etime':this.timeValue[1].toLocaleString(),"limit":99},function (response,status) {
                    if(response.result === true) {
                        self.tableData = response.data;
                        console.log(response)
                    }
                })
            },
            filterTag(value, row) {
                console.log(row,value);
                return row.is_return === value;
            },
        }
    })
</script>
</html>
